<section class="content-header" >
    <h1>
        在线车辆
        <small>在线车辆</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{:U('/Admin/index')}"><i class="fa fa-home"></i>首页</a></li>
        <li class="active">在线车辆</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <div class="box-title"><label >在线车辆</label></div>
                    <div class="pull-right">
                    </div>
                </div><!-- /.box-header -->
                <div class="box-body">
                    <div id="container2" style="width: 80%;height: 600px;margin-bottom: 60px;float: left"></div>
                    <div style="float: left;width: 20%;padding: 10px;">
                        <div style="font-size: 20px;font-weight:bold;">在线车辆</div>
                        <div>
                            <span>车&nbsp;&nbsp;&nbsp;辆:</span><span id="mcarno"></span>
                        </div>
                        <div>
                            <span>驾驶员:</span><span id="mcarname"></span>
                        </div>
                        <div>
                            <span>电&nbsp;&nbsp;&nbsp;话:</span><span id="mcarmobile"></span>
                        </div>
                        <div>
                            <span>载&nbsp;&nbsp;&nbsp;重:</span><span id="mcarload"></span>方
                        </div>
                    </div>
                    <div style="clear: both;"></div>

                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</section><!-- /.content -->
<!-- DATA TABES SCRIPT -->
<!-- page script -->
<script type="text/javascript">
    var icon, marker, geocoder, infoWindow;
    var lng = '{$lng}', lat = '{$lat}';
    $(function () {
        setTimeout(function () {
            var centerPoint =  new BMap.Point(112.97935279, 28.21447823);  // 创建点坐标
            map = new BMap.Map("container2");
            if ((lng != "0" || lat != "0")&&lng!=''&&lat!="") {
                centerPoint = new BMap.Point(lng, lat);  // 创建点坐标
                var myIcon = new BMap.Icon('__PUBLIC__/images/factory.png', new BMap.Size(48, 48), {
                    'imageSize': new BMap.Size(48, 48),
                    'anchor': new BMap.Size(17, 34)
                });
                marker = new BMap.Marker(centerPoint, {icon: myIcon});// 创建标注
                map.addOverlay(marker);             // 将标注添加到地图中
                marker.enableDragging();
            }
            infoWindow = new BMap.InfoWindow("", {
                offset: new BMap.Size(0, -34)
            });  // 创建信息窗口对象
            infoWindow.disableCloseOnClick();

            map.enableScrollWheelZoom();
            map.centerAndZoom(centerPoint, 12);
            //标记所有在线车辆
            $.post("{:U('Car/getOnline')}",null, function (res) {
                if (res.status!=0) {
                   // $.messager.alert('提示信息', res.info, 'error');
                } else {
                    if(res.total==0){
                     //   $.messager.alert('提示信息', "当前没有车辆在线", 'error');
                    }else{
                        //标记车辆位置
                        var myIcon = new BMap.Icon('__PUBLIC__/images/car.png', new BMap.Size(36, 36), {
                            'imageSize': new BMap.Size(36, 36)
                        });
                        var carlist = res.carlist;
                        for(var i=0;i<carlist.length;i++){
                            var car = carlist[i];
                            var point =  new BMap.Point(car.longitude, car.latitude);  // 创建点坐标
                            marker = new BMap.Marker(point, {icon: myIcon});// 创建标注
                            marker.addEventListener("click", function () {
                                var pt = marker.getPosition();
                                openInfo('<div style="color: #00a7d0;font-weight: bold;">车辆</div>车&nbsp;&nbsp;&nbsp;号:' + car.carno +  "<br/>驾驶员:" + car.name+
                                        "<br/>电&nbsp;&nbsp;&nbsp;话:" + car.mobile + "<br/>载&nbsp;&nbsp;&nbsp;重:" + car.load+"方", pt);

                                $("#mcarid").val(car.id);
                                $("#mcarname").html(car.name);
                                $("#mcarno").html(car.carno);
                                $("#mcarmobile").html(car.mobile);
                                $("#mcarload").html(car.load);
                            });
                            map.addOverlay(marker);
                        }
                    }
                }
            });
        }, 200);
    });




    //构建信息窗体中显示的内容
    function openInfo(msg, point) {
        //构建信息窗体中显示的内容
        infoWindow.setContent(msg);  // 创建信息窗口对象
        var centerPoint = new BMap.Point(point.lng, point.lat);  // 创建点坐标
        map.openInfoWindow(infoWindow, centerPoint); //开启信息窗口
    }
</script>